import React from "react";
import { useNavigate } from "react-router-dom";
import { Button, Form, Input, message } from "antd";
import "./index.css";
import { useDispatch } from "react-redux";
import {
  inputEmail,
  sendCodeByEmail,
} from "@/redux/user/ResetPassword/ResetPasswordStore";

function EmailInput() {
  const navigate = useNavigate();
  const [form] = Form.useForm();

  const dispatch = useDispatch();

  async function handleNext() {
    try {
      await form.validateFields();

      const email = form.getFieldValue("email");
      sendCodeByEmail(email);
      dispatch(inputEmail(email));
      navigate("/resetPassword/step2");
    } catch {
      message.warning("请输入正确的邮箱地址");
    }
  }

  return (
    <div className="container">
      <div className="center-container">
        <div className="title">Reset Your Password</div>
        <Form layout="horizontal" form={form}>
          <Form.Item
            name="email"
            rules={[
              { type: "email", message: "The input is not valid E-mail!" },
            ]}
          >
            <div className="email-container">
              <div className="email-label">Email address</div>
              <Input className="email-input"></Input>
            </div>
          </Form.Item>
          <Button onClick={handleNext}>Next</Button>
        </Form>
      </div>
    </div>
  );
}

export default EmailInput;
